<template>
  <!--加载-->
  <div>
    <template v-if="type == 'circular'">
      <div class="loader-center-b">
        <div class="char-b _dot-b-1"></div>
        <div class="char-b _dot-b-2"></div>
        <div class="char-b _dot-b-3"></div>
        <div class="char-b _dot-b-4"></div>
        <div class="char-b _dot-b-5"></div>
        <div class="char-b _dot-b-6"></div>
        <div class="char-b _dot-b-7"></div>
        <div class="char-b _dot-b-8"></div>
        <div class="char-b _dot-b-9"></div>
        <div class="char-b _dot-b-10"></div>
        <div class="char-b _dot-b-11"></div>
        <div class="char-b _dot-b-12"></div>
      </div>
    </template>
    <template v-else>
      <div class='loader-center-a'>
        <div class='char-a _dot_a-1'></div>
        <div class='char-a _dot_a-2'></div>
        <div class='char-a _dot_a-3'></div>
        <div class='char-a _dot_a-4'></div>
      </div>
    </template>
  </div>
</template>

<script>
  export default {
      props:{
          type:{
              type: String,
              default: () => "circular" // rectangle、circular
          }
      }
  }
</script>

<style scoped>
  .loader-center-a {
    cursor: pointer;
    user-select: none;
    width:28px;
    height:25px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    /*color: #1c1f25;*/
    color: rgba(255, 255, 255, 0.41);
    transform: rotate(180deg);
  }
  .char-a {
    float: left;
    width: 3px;
    margin: 0 1px;
    /*background-color: #1c1f25;*/
    background-color: rgba(255, 255, 255, 0.41);
  }

  ._dot_a-1 {
    height: 20px;
    /* background-color: rgba(212, 201, 37, 0.5);*/
  }
  ._dot_a-2 {
    height: 15px;
    /* background-color: rgba(33, 154, 218, 0.5);*/
  }
  ._dot_a-3 {
    height: 10px;
    /* background-color: rgba(99, 220, 34, 0.5);*/
  }
  ._dot_a-4 {
    height: 5px;
    /* background-color: rgba(230, 92, 33, 0.5);*/
  }

  /* 动画 */
  ._dot_a-1 {
    animation:dot_a_1 0.7s ease-in-out infinite;
  }
  ._dot_a-2 {
    animation:dot_a_2 0.7s ease-in-out infinite;
  }
  ._dot_a-3 {
    animation:dot_a_3 0.7s ease-in-out infinite;
  }
  ._dot_a-4 {
    animation:dot_a_4 0.7s ease-in-out infinite;
  }

  @keyframes dot_a_1 {
    0% {
      height: 20px;
    }
    20% {
      height: 15px;
    }
    40% {
      height: 10px;
    }
    60% {
      height: 5px;
    }
    80% {
      height: 10px;
    }
    100% {
      height: 15px;
    }
  }
  @keyframes dot_a_2 {
    0% {
      height: 15px;
    }
    20% {
      height: 20px;
    }
    40% {
      height: 15px;
    }
    60% {
      height: 10px;
    }
    80% {
      height: 5px;
    }
    100% {
      height: 10px;
    }
  }
  @keyframes dot_a_3 {
    0% {
      height: 10px;
    }
    20% {
      height: 15px;
    }
    40% {
      height: 20px;
    }
    60% {
      height: 15px;
    }
    80% {
      height: 10px;
    }
    100% {
      height: 5px;
    }
  }

  @keyframes dot_a_4 {
    0% {
      height: 5px;
    }
    20% {
      height: 10px;
    }
    40% {
      height: 15px;
    }
    60% {
      height: 20px;
    }
    80% {
      height: 15px;
    }
    100% {
      height: 10px;
    }
  }

  .loader-center-b{
    cursor: pointer;
    user-select: none;
    width:30px;
    height:30px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    /*color: #1c1f25;*/
    color: rgba(255, 255, 255, 0.41);;
  }
  .char-b{
    width:2px;
    height:5px;
    border-radius:50%;
    /*background-color: #1c1f25;*/
    background-color: rgba(255, 255, 255, 0.41);;
    position:absolute;
    left:50%;top:50%;
    margin-left: -3px;
    margin-top: -3px;
  }

  ._dot-b-1{
    transform: rotateZ(30deg) translateY(-10px);
    animation:dot-b_1 2s linear infinite;
  }
  ._dot-b-2{
    transform: rotateZ(60deg) translateY(-10px);
    animation:dot-b_2 2s linear infinite;
  }
  ._dot-b-3{
    transform: rotateZ(90deg) translateY(-10px);
    animation:dot-b_3 2s linear infinite;
  }
  ._dot-b-4{
    transform: rotateZ(120deg) translateY(-10px);
    animation:dot-b_4 2s linear infinite;
  }
  ._dot-b-5{
    transform: rotateZ(150deg) translateY(-10px);
    animation:dot-b_5 2s linear infinite;
  }
  ._dot-b-6{
    transform: rotateZ(180deg) translateY(-10px);
    animation:dot-b_6 2s linear infinite;
  }
  ._dot-b-7{
    transform: rotateZ(210deg) translateY(-10px);
    animation:dot-b_7 2s linear infinite;
  }
  ._dot-b-8{
    transform: rotateZ(240deg) translateY(-10px);
    animation:dot-b_8 2s linear infinite;
  }
  ._dot-b-9{
    transform: rotateZ(270deg) translateY(-10px);
    animation:dot-b_9 2s linear infinite;
  }
  ._dot-b-10{
    transform: rotateZ(300deg) translateY(-10px);
    animation:dot-b_10 2s linear infinite;
  }

  ._dot-b-11{
    transform: rotateZ(330deg) translateY(-10px);
    animation:dot-b_11 2s linear infinite;
  }
  ._dot-b-12{
    transform: rotateZ(360deg) translateY(-10px);
    animation:dot-b_12 2s linear infinite;
  }

  @keyframes dot-b_1 {
    0% {
      transform: rotateZ(30deg) translateY(-10px);
    }
    8.333% {
      transform: rotateZ(60deg) translateY(-10px);
    }
    16.666% {
      transform: rotateZ(90deg) translateY(-10px);
    }
    24.999% {
      transform: rotateZ(120deg) translateY(-10px);
    }
    33.332% {
      transform: rotateZ(150deg) translateY(-10px);
    }
    41.665% {
      transform: rotateZ(180deg) translateY(-10px);
    }
    49.998% {
      transform: rotateZ(210deg) translateY(-10px);
    }
    58.331% {
      transform: rotateZ(240deg) translateY(-10px);
    }
    66.664% {
      transform: rotateZ(270deg) translateY(-10px);
    }
    74.997% {
      transform: rotateZ(300deg) translateY(-10px);
    }
    83.33% {
      transform: rotateZ(330deg) translateY(-10px);
    }
    91.663% {
      transform: rotateZ(360deg) translateY(-10px);
    }
    100% {
      transform: rotateZ(390deg) translateY(-10px);
    }
  }
  @keyframes dot-b_2 {
    0% {
      transform: rotateZ(60deg) translateY(-10px);
    }
    8.333% {
      transform: rotateZ(90deg) translateY(-10px);
    }
    16.666% {
      transform: rotateZ(120deg) translateY(-10px);
    }
    24.999% {
      transform: rotateZ(150deg) translateY(-10px);
    }
    33.332% {
      transform: rotateZ(180deg) translateY(-10px);
    }
    41.665% {
      transform: rotateZ(210deg) translateY(-10px);
    }
    49.998% {
      transform: rotateZ(240deg) translateY(-10px);
    }
    58.331% {
      transform: rotateZ(270deg) translateY(-10px);
    }
    66.664% {
      transform: rotateZ(300deg) translateY(-10px);
    }
    74.997% {
      transform: rotateZ(330deg) translateY(-10px);
    }
    83.33% {
      transform: rotateZ(360deg) translateY(-10px);
    }
    91.663% {
      transform: rotateZ(390deg) translateY(-10px);
    }
    100% {
      transform: rotateZ(420deg) translateY(-10px);
    }
  }
  @keyframes dot-b_3 {
    0% {
      transform: rotateZ(90deg) translateY(-10px);
    }
    8.333% {
      transform: rotateZ(120deg) translateY(-10px);
    }
    16.666% {
      transform: rotateZ(150deg) translateY(-10px);
    }
    24.999% {
      transform: rotateZ(180deg) translateY(-10px);
    }
    33.332% {
      transform: rotateZ(210deg) translateY(-10px);
    }
    41.665% {
      transform: rotateZ(240deg) translateY(-10px);
    }
    49.998% {
      transform: rotateZ(270deg) translateY(-10px);
    }
    58.331% {
      transform: rotateZ(300deg) translateY(-10px);
    }
    66.664% {
      transform: rotateZ(330deg) translateY(-10px);
    }
    74.997% {
      transform: rotateZ(360deg) translateY(-10px);
    }
    83.33% {
      transform: rotateZ(390deg) translateY(-10px);
    }
    91.663% {
      transform: rotateZ(420deg) translateY(-10px);
    }
    100% {
      transform: rotateZ(450deg) translateY(-10px);
    }
  }
  @keyframes dot-b_4 {
    0% {
      transform: rotateZ(120deg) translateY(-10px);
    }
    8.333% {
      transform: rotateZ(150deg) translateY(-10px);
    }
    16.666% {
      transform: rotateZ(180deg) translateY(-10px);
    }
    24.999% {
      transform: rotateZ(210deg) translateY(-10px);
    }
    33.332% {
      transform: rotateZ(240deg) translateY(-10px);
    }
    41.665% {
      transform: rotateZ(270deg) translateY(-10px);
    }
    49.998% {
      transform: rotateZ(300deg) translateY(-10px);
    }
    58.331% {
      transform: rotateZ(330deg) translateY(-10px);
    }
    66.664% {
      transform: rotateZ(360deg) translateY(-10px);
    }
    74.997% {
      transform: rotateZ(390deg) translateY(-10px);
    }
    83.33% {
      transform: rotateZ(420deg) translateY(-10px);
    }
    91.663% {
      transform: rotateZ(450deg) translateY(-10px);
    }
    100% {
      transform: rotateZ(480deg) translateY(-10px);
    }
  }
  @keyframes dot-b_5 {
    0% {
      transform: rotateZ(150deg) translateY(-10px);
    }
    8.333% {
      transform: rotateZ(180deg) translateY(-10px);
    }
    16.666% {
      transform: rotateZ(210deg) translateY(-10px);
    }
    24.999% {
      transform: rotateZ(240deg) translateY(-10px);
    }
    33.332% {
      transform: rotateZ(270deg) translateY(-10px);
    }
    41.665% {
      transform: rotateZ(300deg) translateY(-10px);
    }
    49.998% {
      transform: rotateZ(330deg) translateY(-10px);
    }
    58.331% {
      transform: rotateZ(360deg) translateY(-10px);
    }
    66.664% {
      transform: rotateZ(390deg) translateY(-10px);
    }
    74.997% {
      transform: rotateZ(420deg) translateY(-10px);
    }
    83.33% {
      transform: rotateZ(450deg) translateY(-10px);
    }
    91.663% {
      transform: rotateZ(480deg) translateY(-10px);
    }
    100% {
      transform: rotateZ(510deg) translateY(-10px);
    }
  }
  @keyframes dot-b_6 {
    0% {
      transform: rotateZ(180deg) translateY(-10px);
    }
    8.333% {
      transform: rotateZ(210deg) translateY(-10px);
    }
    16.666% {
      transform: rotateZ(240deg) translateY(-10px);
    }
    24.999% {
      transform: rotateZ(270deg) translateY(-10px);
    }
    33.332% {
      transform: rotateZ(300deg) translateY(-10px);
    }
    41.665% {
      transform: rotateZ(330deg) translateY(-10px);
    }
    49.998% {
      transform: rotateZ(360deg) translateY(-10px);
    }
    58.331% {
      transform: rotateZ(390deg) translateY(-10px);
    }
    66.664% {
      transform: rotateZ(420deg) translateY(-10px);
    }
    74.997% {
      transform: rotateZ(450deg) translateY(-10px);
    }
    83.33% {
      transform: rotateZ(480deg) translateY(-10px);
    }
    91.663% {
      transform: rotateZ(510deg) translateY(-10px);
    }
    100% {
      transform: rotateZ(540deg) translateY(-10px);
    }
  }
  @keyframes dot-b_7 {
    0% {
      transform: rotateZ(210deg) translateY(-10px);
    }
    8.333% {
      transform: rotateZ(240deg) translateY(-10px);
    }
    16.666% {
      transform: rotateZ(270deg) translateY(-10px);
    }
    24.999% {
      transform: rotateZ(300deg) translateY(-10px);
    }
    33.332% {
      transform: rotateZ(330deg) translateY(-10px);
    }
    41.665% {
      transform: rotateZ(360deg) translateY(-10px);
    }
    49.998% {
      transform: rotateZ(390deg) translateY(-10px);
    }
    58.331% {
      transform: rotateZ(420deg) translateY(-10px);
    }
    66.664% {
      transform: rotateZ(450deg) translateY(-10px);
    }
    74.997% {
      transform: rotateZ(480deg) translateY(-10px);
    }
    83.33% {
      transform: rotateZ(510deg) translateY(-10px);
    }
    91.663% {
      transform: rotateZ(540deg) translateY(-10px);
    }
    100% {
      transform: rotateZ(570deg) translateY(-10px);
    }
  }
  @keyframes dot-b_8 {
    0% {
      transform: rotateZ(240deg) translateY(-10px);
    }
    8.333% {
      transform: rotateZ(270deg) translateY(-10px);
    }
    16.666% {
      transform: rotateZ(300deg) translateY(-10px);
    }
    24.999% {
      transform: rotateZ(330deg) translateY(-10px);
    }
    33.332% {
      transform: rotateZ(360deg) translateY(-10px);
    }
    41.665% {
      transform: rotateZ(390deg) translateY(-10px);
    }
    49.998% {
      transform: rotateZ(420deg) translateY(-10px);
    }
    58.331% {
      transform: rotateZ(450deg) translateY(-10px);
    }
    66.664% {
      transform: rotateZ(480deg) translateY(-10px);
    }
    74.997% {
      transform: rotateZ(510deg) translateY(-10px);
    }
    83.33% {
      transform: rotateZ(540deg) translateY(-10px);
    }
    91.663% {
      transform: rotateZ(570deg) translateY(-10px);
    }
    100% {
      transform: rotateZ(600deg) translateY(-10px);
    }
  }
  @keyframes dot-b_9 {
    0% {
      transform: rotateZ(270deg) translateY(-10px);
    }
    8.333% {
      transform: rotateZ(300deg) translateY(-10px);
    }
    16.666% {
      transform: rotateZ(330deg) translateY(-10px);
    }
    24.999% {
      transform: rotateZ(360deg) translateY(-10px);
    }
    33.332% {
      transform: rotateZ(390deg) translateY(-10px);
    }
    41.665% {
      transform: rotateZ(420deg) translateY(-10px);
    }
    49.998% {
      transform: rotateZ(450deg) translateY(-10px);
    }
    58.331% {
      transform: rotateZ(480deg) translateY(-10px);
    }
    66.664% {
      transform: rotateZ(510deg) translateY(-10px);
    }
    74.997% {
      transform: rotateZ(540deg) translateY(-10px);
    }
    83.33% {
      transform: rotateZ(570deg) translateY(-10px);
    }
    91.663% {
      transform: rotateZ(600deg) translateY(-10px);
    }
    100% {
      transform: rotateZ(630deg) translateY(-10px);
    }
  }
  @keyframes dot-b_10 {
    0% {
      transform: rotateZ(300deg) translateY(-10px);
    }
    8.333% {
      transform: rotateZ(330deg) translateY(-10px);
    }
    16.666% {
      transform: rotateZ(360deg) translateY(-10px);
    }
    24.999% {
      transform: rotateZ(390deg) translateY(-10px);
    }
    33.332% {
      transform: rotateZ(420deg) translateY(-10px);
    }
    41.665% {
      transform: rotateZ(450deg) translateY(-10px);
    }
    49.998% {
      transform: rotateZ(480deg) translateY(-10px);
    }
    58.331% {
      transform: rotateZ(510deg) translateY(-10px);
    }
    66.664% {
      transform: rotateZ(540deg) translateY(-10px);
    }
    74.997% {
      transform: rotateZ(570deg) translateY(-10px);
    }
    83.33% {
      transform: rotateZ(600deg) translateY(-10px);
    }
    91.663% {
      transform: rotateZ(630deg) translateY(-10px);
    }
    100% {
      transform: rotateZ(660deg) translateY(-10px);
    }
  }
  @keyframes dot-b_11 {
    0% {
      transform: rotateZ(330deg) translateY(-10px);
    }
    8.333% {
      transform: rotateZ(360deg) translateY(-10px);
    }
    16.666% {
      transform: rotateZ(390deg) translateY(-10px);
    }
    24.999% {
      transform: rotateZ(420deg) translateY(-10px);
    }
    33.332% {
      transform: rotateZ(450deg) translateY(-10px);
    }
    41.665% {
      transform: rotateZ(480deg) translateY(-10px);
    }
    49.998% {
      transform: rotateZ(510deg) translateY(-10px);
    }
    58.331% {
      transform: rotateZ(540deg) translateY(-10px);
    }
    66.664% {
      transform: rotateZ(570deg) translateY(-10px);
    }
    74.997% {
      transform: rotateZ(600deg) translateY(-10px);
    }
    83.33% {
      transform: rotateZ(630deg) translateY(-10px);
    }
    91.663% {
      transform: rotateZ(660deg) translateY(-10px);
    }
    100% {
      transform: rotateZ(690deg) translateY(-10px);
    }
  }
  @keyframes dot-b_12 {
    0% {
      transform: rotateZ(360deg) translateY(-10px);
    }
    8.333% {
      transform: rotateZ(390deg) translateY(-10px);
    }
    16.666% {
      transform: rotateZ(420deg) translateY(-10px);
    }
    24.999% {
      transform: rotateZ(450deg) translateY(-10px);
    }
    33.332% {
      transform: rotateZ(480deg) translateY(-10px);
    }
    41.665% {
      transform: rotateZ(510deg) translateY(-10px);
    }
    49.998% {
      transform: rotateZ(540deg) translateY(-10px);
    }
    58.331% {
      transform: rotateZ(570deg) translateY(-10px);
    }
    66.664% {
      transform: rotateZ(600deg) translateY(-10px);
    }
    74.997% {
      transform: rotateZ(630deg) translateY(-10px);
    }
    83.33% {
      transform: rotateZ(660deg) translateY(-10px);
    }
    91.663% {
      transform: rotateZ(690deg) translateY(-10px);
    }
    100% {
      transform: rotateZ(720deg) translateY(-10px);
    }
  }
</style>
